<template>
  <div class="green-strategy-gen">
    <el-row :gutter="32">
      <!-- 左侧：评估短板与分析 -->
      <el-col :span="8">
        <el-card>
          <div class="section-title">评估短板与分析</div>
          <el-timeline>
            <el-timeline-item
              v-for="item in weakPoints"
              :key="item.title"
              :color="item.color"
              :timestamp="item.scoreDesc"
              placement="top"
            >
              <b>{{ item.title }}</b>
              <div style="color:#888;margin-top:4px;">{{ item.desc }}</div>
            </el-timeline-item>
          </el-timeline>
          <el-button type="primary" style="margin-top:18px;" @click="refreshStrategies">
            刷新策略建议
          </el-button>
        </el-card>
      </el-col>
      <!-- 右侧：智能生成策略建议 -->
      <el-col :span="16">
        <el-card>
          <div class="section-title">提升策略建议</div>
          <el-row :gutter="20">
            <el-col :span="12" v-for="(item, idx) in strategies" :key="idx">
              <el-card :body-style="{ padding: '20px' }" class="strategy-card">
                <div class="strategy-title">
                  <el-icon :size="18" style="color:#67C23A;margin-right:8px;"><i-ep-lightning /></el-icon>
                  {{ item.title }}
                </div>
                <div class="strategy-desc">{{ item.desc }}</div>
                <div class="card-actions">
                  <el-button size="small" type="success" plain @click="acceptStrategy(idx)">采纳</el-button>
                  <el-button size="small" type="info" plain @click="ignoreStrategy(idx)">忽略</el-button>
                </div>
              </el-card>
            </el-col>
          </el-row>
          <el-empty v-if="!strategies.length" description="暂无可生成策略，建议刷新"/>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

// 评估短板（模拟）
const weakPoints = [
  {
    title: '碳排放偏高',
    desc: '碳排放指标得分较低，主要来源为空调和照明系统，能耗结构偏重。',
    scoreDesc: '得分：72',
    color: '#E6A23C'
  },
  {
    title: '可再生能源利用率低',
    desc: '建筑未配置太阳能/地源热泵等可再生能源设备。',
    scoreDesc: '得分：64',
    color: '#E6A23C'
  },
  {
    title: '用水回用率一般',
    desc: '雨水及中水利用比例不足，节水设施待完善。',
    scoreDesc: '得分：80',
    color: '#409EFF'
  }
]

// 策略建议池
const strategyPool = [
  {
    title: '优化空调能效',
    desc: '建议采用高效空调主机，并分区控制，实现按需开启，降低碳排放与能耗。'
  },
  {
    title: '升级照明系统',
    desc: '推荐全面更换为LED照明，结合智能感应开关，实现人来灯亮、人走灯灭。'
  },
  {
    title: '引入可再生能源',
    desc: '鼓励安装太阳能光伏板、地源热泵等设备，提升清洁能源利用率。'
  },
  {
    title: '完善雨水回收系统',
    desc: '建议建设雨水收集池与回用设施，用于绿化与清洁，提高用水效率。'
  },
  {
    title: '强化能耗监测与动态调整',
    desc: '通过部署能耗监测平台，实时分析能耗变化，动态调整运行策略。'
  },
  {
    title: '推行绿色采购政策',
    desc: '优先采购高能效、环保认证设备与材料，减少全生命周期碳足迹。'
  }
]

// 当前策略（前端随机取3~5条）
function randomStrategies() {
  const n = Math.floor(Math.random() * 3) + 3
  return [...strategyPool].sort(() => 0.5 - Math.random()).slice(0, n)
}
const strategies = ref(randomStrategies())

// 刷新策略建议
function refreshStrategies() {
  strategies.value = randomStrategies()
}

// 采纳/忽略演示
function acceptStrategy(idx: number) {
  strategies.value.splice(idx, 1)
}
function ignoreStrategy(idx: number) {
  strategies.value.splice(idx, 1)
}
</script>

<style scoped>
.green-strategy-gen {
  width: 100%;
  margin: 0;
  padding: 32px 0;
}
.section-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 14px;
  color: #308d2d;
}
.strategy-card {
  border-radius: 18px;
  background: linear-gradient(120deg,#fff 75%,#e8faea 100%);
  box-shadow: 0 2px 12px #0001;
  margin-bottom: 18px;
  min-height: 168px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.strategy-title {
  font-size: 17px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #308d2d;
  display: flex;
  align-items: center;
}
.strategy-desc {
  font-size: 15px;
  color: #444;
  margin-bottom: 16px;
}
.card-actions {
  display: flex;
  gap: 8px;
}
</style>
